{% extends "kitchen/dashboard_base.html" %}

{% load compile_static %}
{% load static %}

{% block cssincludes %}
<link href="{% static 'menu.scss'|compile %}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block content %}

<div class="menu-controls">
    <div class="btn-group" role="group">
        <button id="menu-create-drop" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Create
        </button>
        <div class="dropdown-menu" aria-labelledby="menu-create-drop">
            <a class="dropdown-item" href="{% url 'menu_category_create' %}">Category</a>
            <a class="dropdown-item" href="{% url 'menu_create' %}">Item</a>
        </div>
    </div>

    {% if category %}
        <div class="menu-breadcrumbs btn-group" role="group" aria-label="Category breadcrumbs">
            <a class="btn btn-secondary" href="{% url 'menu' %}">Menu</a>
            {% for bcat in breadcrumbs %}
                <a class="btn btn-secondary" href="{% url "menu" bcat.id %}">{{bcat.name}}</a>
            {% endfor %}
        </div>
    {% endif %}

    <a href="{% url "menu_ingredients" %}" class="btn btn-primary">Ingredients</a>
</div>

<br />

<div id="menu-items">
    <div class="row">
        {% for item in items  %}
            <div class="col-md-3 col-sm-4 menu-item-container">
                {% if item.type == "category" %}
                    <a href="{% url "menu" item.obj.id %}">
                {% else %}
                    <a href="{% url "menu_edit" item.obj.id %}">
                {% endif %}

                <div class="card {% if item.type == "category" %}menu-category-card{%else%}menu-item-card{%endif%}">
                    <div class="card-block">
                        <h4 class="card-title">{{ item.obj.name }}</h4>
                    </div>
                </div>

                {% if item.type == "category" %}
                    </a>
                {% endif %}
            </div>
            {% if forloop.counter|divisibleby:4 %}
                </div>
                <div class="row">
            {% endif %}
        {% empty %}
            <div class="alert alert-info">
                <strong>Nothing here yet!</strong> Create some menu categories and items so that your customers have food to order.
            </div>
        {% endfor %}
    </div>
</div>

{% endblock %}
